<template>
  <view>
    <view class="top">
    </view>
    <!-- 搜索框 -->
    <view class="search">
      <img src="../../static/搜索.png" alt="">
      <input type="text" placeholder="阳澄湖大闸蟹" />
      <button>搜索</button>
    </view>
    <!-- 宫格 -->
    <u-grid :col="5" :border="false">
      <u-grid-item>
        <img src="../../static/拼团购.png" />
        <view class="grid-text">水果</view>
      </u-grid-item>
      <u-grid-item>
        <img src="../../static/秒杀.png" />
        <view class="grid-text">蔬菜</view>
      </u-grid-item>
      <u-grid-item>
        <img src="../../static/精选.png" />
        <view class="grid-text">肉类</view>
      </u-grid-item>
      <u-grid-item>
        <img src="../../static/领券.png" />
        <view class="grid-text">海鲜</view>
      </u-grid-item>
      <u-grid-item>
        <img src="../../static/分享.png" />
        <view class="grid-text">熟食</view>
      </u-grid-item>
    </u-grid>
    <!-- 推荐 -->
    <view class="nav-box2">
      <y-tabs v-model="activeIndex" @click="tabClick" @change="tabChange" direction="vertical" color="#4B9E73"
        title-active-color="#63BB91" title-inactive-color="#A5A5A5" bar-width="6px" background="#FAFAFA"
        is-dynamic="true" bar-height="30px" wrap-style="border-radius:10px">
     		 <y-tab class="y-tab-virtual" title="推荐" title-style="height:49px;">
          <!-- <view class="content-wrap">
            <view class="nav-banner">
              <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" style="height: 100px;">
                <swiper-item>
                  <image src="@/static/image/list-banner.jpg" alt="" class="list-banner" mode="widthFix">
                  </image>
                </swiper-item>
                <swiper-item>
                  <image src="@/static/image/list-banner.jpg" alt="" class="list-banner" mode="widthFix">
                  </image>
                </swiper-item>
              </swiper>
            </view>
    		      <view class="nav-all">
              <view class="nav-content">
                <view class="left-image">
                  <image src="/static/image/list-6.jpg" mode="widthFix"></image>
                  <span class="list-today">今日疯抢</span>
                </view>
                <view class="good-text">
                  <p>优质小白菜</p>
                  <p class="good-content">基地直供|绿色培植|新鲜采摘</p>
                  <p style="text-align: center;">基地直采</p>
                  <view style="display: flex;position: relative;">
                    <view class="list-quan">
                      <span class="quan">券</span>
                      <span class="jian">减3元</span>
                    </view>
    	               <p class="money">￥9.98</p>
                    <span class="jin">/斤</span>
                    <view class="list-button">
                      <p class="button-right">+</p>
                    </view>
                  </view>
                </view>
              </view>
              <view class="nav-content">
                <view class="left-image">
                  <image src="/static/image/list-7.jpg" mode="widthFix"></image>
                </view>
                <view class="good-text" style="margin-top: -110px;">
                  <p>高山精选本地生菜</p>
                  <p class="good-content">基地直供|绿色培植|新鲜采摘</p>
                  <p style="border: 1px solid #58B687;color: #85C0A5; text-align: center;">
                    高山有机</p>
                  <view style="display: flex;position: relative;">
                    <p class="money">￥5.9</p>
                    <span class="jin">/斤</span>
                    <view class="list-button" style="margin-left: 60px;margin-top: -2px;">
                      <p class="button-right">+</p>
                    </view>
                  </view>
                </view>
              </view>
              <view class="nav-content">
                <view class="left-image">
    		            <image src="/static/image/list-8.jpg" mode="widthFix"></image>
                  <span class="list-today" style="margin-top: 36px;">今日疯抢</span>
                </view>
                <view class="good-text">
                  <p>优质小白菜</p>
                  <p class="good-content">基地直供|绿色培植|新鲜采摘</p>
                  <p style="border: 1px solid #E8D18E;color: #F1F2C0;text-align: center;color: #EBD57F;">
                    主食必备</p>
                  <view style="display: flex;position: relative;">
                    <view class="list-quan">
                      <span class="quan">券</span>
                      <span class="jian">减1元</span>
                    </view>
                    <p class="money">￥3.79</p>
                    <span class="jin">/斤</span>
                    <view class="list-button">
                      <p class="button-right">+</p>
                    </view>
                  </view>
                </view>
              </view>
              <view class="nav-content">
                <view class="left-image">
                  <image src="/static/image/list-9.jpg" mode="widthFix"></image>
                </view>
                <view class="good-text" style="margin-top: -110px;">
                  <p>优质小白菜</p>
                  <p class="good-content">基地直供|绿色培植|新鲜采摘</p>
                  <p style="text-align: center;">多汁香甜</p>
                  <view style="display: flex;position: relative;">
                    <view class="list-quan">
                      <span class="quan">券</span>
                      <span class="jian">减10元</span>
                    </view>
                    <p class="money">￥10.57</p>
                    <span class="jin">/斤</span>
                    <view class="list-button" style="margin-top: -2px;margin-left:42px;">
                      <p class="button-right">+</p>
                    </view>
    			           </view>
                </view>
              </view>
            </view>
          </view> -->
        </y-tab>
        <y-tab class="y-tab-virtual" title="热销爆款" title-style="height:48px;">
          <view class="content-wrap"> 内容1 </view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="新品" title-style="height:48px;">
          <view class="content-wrap"> 内容2 </view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="绿菜" title-style="height:48px;">
          <view class="content-wrap"> 内容3 </view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="番茄" title-style="height:48px;">
          <view class="content-wrap"> 内容4 </view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="茄果" title-style="height:48px;">
          <view class="content-wrap"> 内容5</view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="玉米" title-style="height:48px;">
          <view class="content-wrap"> 内容8 </view>
        </y-tab>
    	   <y-tab class="y-tab-virtual" title="花菜" title-style="height:48px;">
          <view class="content-wrap"> 内容9 </view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="豆制品" title-style="height:48px;">
          <view class="content-wrap"> 内容10 </view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="菌菇" title-style="height:48px;">
          <view class="content-wrap"> 内容11 </view>
        </y-tab>
        <y-tab class="y-tab-virtual" title="有机蔬菜" title-style="height:48px;">
          <view class="content-wrap"> 内容12 </view>
        </y-tab>
    	   <y-tab class="y-tab-virtual" title="进口蔬菜" title-style="height:48px">
          <view class="content-wrap"> 内容13 </view>
        </y-tab>

      </y-tabs>
    </view>
    </view>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style lang="scss">
  .top {
    height: 200rpx;
    background: linear-gradient(#CFF1DE, #fff);
  }

  // 搜索框
  .search {
    position: relative;
    margin-top: -120rpx;

    img {
      width: 70rpx;
      height: 70rpx;
      position: absolute;
      left: 70rpx;
    }

    input {
      background-color: #fff;
      width: 85%;
      margin: auto;
      height: 70rpx;
      border-radius: 30rpx;
      margin-top: 60rpx;

      .input-placeholder {
        padding-left: 80rpx;
        font-size: 27rpx;
        color: #C7C7C7;
      }
    }

    button {
      width: 140rpx;
      height: 59rpx;
      border-radius: 30rpx;
      position: absolute;
      left: 550rpx;
      top: 6rpx;
      background-color: #68C993;
      color: #fff;
      line-height: 59rpx;
      font-size: 30rpx;
    }
  }

  //宫格
  .u-grid {
    width: 90%;
    margin: auto;
  }

  .grid-text {
    font-size: 30rpx;
    margin-top: 8rpx;
    color: #3B3B3B;
  }

  .u-grid-item {
    img {
      height: 65rpx;
      width: 65rpx;
    }
  }
</style>
